<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带有弹窗的网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        
        .header {
            background-color: #fff;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: flex-end;
        }
        
        .open-dialog-btn {
            background-color: #4285f4;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .open-dialog-btn:hover {
            background-color: #3367d6;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            width: 400px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            position: relative;
        }
        
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            color: #ff0000;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close-btn:hover {
            color: #cc0000;
        }
        
        .input-container {
            display: flex;
            margin-top: 20px;
        }
        
        .text-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        
        .confirm-btn {
            margin-left: 10px;
            padding: 10px 15px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .confirm-btn:hover {
            background-color: #3367d6;
        }
    </style>
</head>
<body>
    <div class="header">
        <button class="open-dialog-btn" id="openDialogBtn">打开对话框</button>
    </div>
    
    <div class="modal" id="dialogModal">
        <div class="modal-content">
            <span class="close-btn" id="closeBtn">&times;</span>
            <div class="input-container">
                <input type="text" class="text-input" placeholder="请输入文本...">
                <button class="confirm-btn">确定</button>
            </div>
        </div>
    </div>

    <div id="backendText" style="margin: 20px; font-size: 18px; color: #333;">
        后端内容：<span id="backendTextValue"></span>
    </div>

    <script>
        // 获取DOM元素
        const openDialogBtn = document.getElementById('openDialogBtn');
        const dialogModal = document.getElementById('dialogModal');
        const closeBtn = document.getElementById('closeBtn');
        const confirmBtn = document.querySelector('.confirm-btn');
        const textInput = document.querySelector('.text-input');
        const backendTextValue = document.getElementById('backendTextValue');
    
        // 打开对话框
        openDialogBtn.addEventListener('click', function() {
            dialogModal.style.display = 'flex';
        });
    
        // 关闭对话框
        closeBtn.addEventListener('click', function() {
            dialogModal.style.display = 'none';
        });
    
        // 点击对话框外部区域关闭对话框
        window.addEventListener('click', function(event) {
            if (event.target === dialogModal) {
                dialogModal.style.display = 'none';
            }
        });
    
        // 确定按钮：发送AJAX请求
        confirmBtn.addEventListener('click', function() {
            const text = textInput.value;
            fetch('/set_text/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    // 'X-CSRFToken': getCookie('csrftoken'), // 若启用CSRF
                },
                body: JSON.stringify({text: text})
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'ok') {
                    updateBackendText();
                    dialogModal.style.display = 'none';
                    textInput.value = '';
                }
            });
        });
    
        // 获取后端变量内容并显示
        function updateBackendText() {
            fetch('/get_text/')
                .then(response => response.json())
                .then(data => {
                    backendTextValue.textContent = data.text;
                });
        }
    
        // 页面加载时获取一次
        updateBackendText();
    </script>
</body>
</html>